<template>
  <div class="device-form-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="device-form">
      <!-- 基本信息 -->
      <el-card class="form-section" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-info"></i>
          <span>基本信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备编码" prop="deviceCode">
              <el-input
                v-model="form.deviceCode"
                placeholder="请输入设备编码"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input
                v-model="form.deviceName"
                placeholder="请输入设备名称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select
                v-model="form.deviceType"
                placeholder="请选择设备类型"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.ems_device_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="deviceModel">
              <el-input
                v-model="form.deviceModel"
                placeholder="请输入设备型号"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备位置" prop="location">
              <el-input
                v-model="form.location"
                placeholder="请输入设备位置"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属部门" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="deptOptions"
                :normalizer="normalizer"
                placeholder="请选择所属部门"
                class="custom-treeselect"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="制造商" prop="manufacturer">
              <el-input
                v-model="form.manufacturer"
                placeholder="请输入制造商"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备状态" prop="status">
              <el-radio-group v-model="form.status" class="status-radio-group">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                  class="status-radio"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 时间信息 -->
      <el-card class="form-section" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-time"></i>
          <span>时间信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出厂日期" prop="manufactureDate">
              <el-date-picker
                clearable
                v-model="form.manufactureDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择出厂日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装日期" prop="installDate">
              <el-date-picker
                clearable
                v-model="form.installDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择安装日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 技术参数 -->
      <el-card class="form-section" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-data-line"></i>
          <span>技术参数</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="额定功率" prop="ratedPower">
              <el-input
                v-model="form.ratedPower"
                placeholder="请输入额定功率"
                clearable
              >
                <template slot="append">kW</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="额定电压" prop="ratedVoltage">
              <el-input
                v-model="form.ratedVoltage"
                placeholder="请输入额定电压"
                clearable
              >
                <template slot="append">V</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="额定电流" prop="ratedCurrent">
              <el-input
                v-model="form.ratedCurrent"
                placeholder="请输入额定电流"
                clearable
              >
                <template slot="append">A</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 备注信息 -->
      <el-card class="form-section" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-document-copy"></i>
          <span>备注信息</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入备注信息"
                :rows="3"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <!-- 操作按钮 -->
    <div class="form-footer">
      <el-button type="primary" @click="submitForm" :loading="submitLoading">
        确 定
      </el-button>
      <el-button @click="cancel">
        取 消
      </el-button>
    </div>
  </div>
</template>

<script>
import { addDevice, updateDevice, checkDeviceCodeUnique } from "@/api/energy/device";
import { listDept } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { handleTree } from "@/utils/ruoyi";

export default {
  name: "DeviceForm",
  components: {
    Treeselect
  },
  props: {
    device: {
      type: Object,
      default: () => ({})
    },
    dict: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 部门树选项
      deptOptions: [],
      // 提交加载状态
      submitLoading: false,
      // 表单校验
      rules: {
        deviceCode: [
          { required: true, message: "设备编码不能为空", trigger: "blur" },
          { validator: this.checkDeviceCode, trigger: "blur" }
        ],
        deviceName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" }
        ],
        deviceType: [
          { required: true, message: "设备类型不能为空", trigger: "change" }
        ],
        status: [
          { required: true, message: "设备状态不能为空", trigger: "change" }
        ]
      }
    };
  },
  watch: {
    device: {
      handler(newVal) {
        this.form = { ...newVal };
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getDeptTree();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      listDept().then(response => {
        this.deptOptions = handleTree(response.data, "deptId", "parentId");
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    /** 设备编码唯一性校验 */
    checkDeviceCode(rule, value, callback) {
      if (value) {
        const device = {
          deviceId: this.form.deviceId,
          deviceCode: value
        };
        checkDeviceCodeUnique(device).then(response => {
          if (!response) {
            callback(new Error("设备编码已存在"));
          } else {
            callback();
          }
        }).catch(() => {
          callback(new Error("校验设备编码时发生错误"));
        });
      } else {
        callback();
      }
    },
    /** 表单重置 */
    reset() {
      this.form = {
        deviceId: null,
        deviceCode: null,
        deviceName: null,
        deviceType: null,
        deviceModel: null,
        location: null,
        deptId: null,
        status: "0",
        manufacturer: null,
        manufactureDate: null,
        installDate: null,
        ratedPower: null,
        ratedVoltage: null,
        ratedCurrent: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitLoading = true;
          if (this.form.deviceId != null) {
            updateDevice(this.form).then(() => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("submitSuccess");
            }).catch(() => {
              this.$modal.msgError("修改失败");
            }).finally(() => {
              this.submitLoading = false;
            });
          } else {
            addDevice(this.form).then(() => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("submitSuccess");
            }).catch(() => {
              this.$modal.msgError("新增失败");
            }).finally(() => {
              this.submitLoading = false;
            });
          }
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("cancel");
      this.reset();
    }
  }
};
</script>

<style lang="scss" scoped>
.device-form-container {
  padding: 0;
  background: #ffffff;

  .device-form {
    .form-section {
      margin-bottom: 20px;
      border: 1px solid #e8ecf0;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      background: #ffffff;

      .section-header {
        display: flex;
        align-items: center;
        font-weight: 600;
        color: #ffffff;
        font-size: 15px;

        i {
          margin-right: 8px;
          color: #ffffff;
          font-size: 16px;
        }
      }

      ::v-deep .el-card__header {
        background: #409eff;
        border-bottom: none;
        padding: 16px 20px;
      }

      ::v-deep .el-card__body {
        padding: 24px 20px 20px;
        background: #ffffff;
      }
    }

    .el-form-item {
      margin-bottom: 20px;

      ::v-deep .el-form-item__label {
        font-weight: 500;
        color: #303133;
        line-height: 40px;
        font-size: 14px;
      }

      ::v-deep .el-input__inner,
      ::v-deep .el-textarea__inner {
        border-radius: 6px;
        border: 1px solid #dcdfe6;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        padding: 0 12px;

        &::placeholder {
          color: #c0c4cc;
          font-size: 14px;
        }

        &:hover {
          border-color: #c0c4cc;
        }

        &:focus {
          border-color: #409eff;
          outline: none;
        }
      }

      ::v-deep .el-textarea__inner {
        height: auto;
        line-height: 1.5;
        padding: 8px 12px;
        resize: vertical;
        min-height: 72px;
      }

      ::v-deep .el-select {
        width: 100%;

        .el-input__inner {
          height: 40px;
          line-height: 40px;
        }
      }

      ::v-deep .el-date-editor {
        width: 100%;

        .el-input__inner {
          height: 40px;
          line-height: 40px;
        }

        .el-input__prefix {
          display: none !important;
        }

        .el-input__prefix .el-input__icon {
          display: none !important;
        }
      }

      ::v-deep .el-input-group__append {
        background: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-left: none;
        border-radius: 0 6px 6px 0;
        color: #909399;
        font-weight: normal;
        padding: 0 12px;
        font-size: 14px;
      }
    }

    .status-radio-group {
      .status-radio {
        margin-right: 20px;

        ::v-deep .el-radio__label {
          font-weight: normal;
          color: #606266;
          font-size: 14px;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .custom-treeselect {
      ::v-deep .vue-treeselect__control {
        border-radius: 6px;
        border: 1px solid #dcdfe6;
        min-height: 40px;

        &:hover {
          border-color: #c0c4cc;
        }

        &.vue-treeselect--focused {
          border-color: #409eff;
        }
      }

      ::v-deep .vue-treeselect__placeholder {
        color: #c0c4cc;
        font-size: 14px;
      }

      ::v-deep .vue-treeselect__single-value {
        color: #606266;
        font-size: 14px;
      }

      ::v-deep .vue-treeselect__value-container {
        padding: 0 12px;
      }
    }
  }

  .form-footer {
    text-align: center;
    padding: 24px 20px 20px;
    background: #f5f7fa;
    border-top: 1px solid #e4e7ed;
    margin-top: 20px;

    .el-button {
      padding: 10px 20px;
      border-radius: 4px;
      font-weight: normal;
      font-size: 14px;
      min-width: 80px;
      height: 36px;
      margin: 0 8px;

      &.el-button--primary {
        background: #409eff;
        border-color: #409eff;
        color: #ffffff;

        &:hover {
          background: #66b1ff;
          border-color: #66b1ff;
        }

        &:active {
          background: #3a8ee6;
          border-color: #3a8ee6;
        }
      }

      &:not(.el-button--primary) {
        border: 1px solid #dcdfe6;
        color: #606266;
        background: #ffffff;

        &:hover {
          color: #409eff;
          border-color: #c6e2ff;
          background-color: #ecf5ff;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .device-form-container {
    .device-form {
      .form-section {
        margin-bottom: 20px;

        ::v-deep .el-card__body {
          padding: 24px 20px 20px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .device-form-container {
    padding: 0;
    background: #ffffff;

    .device-form {
      .form-section {
        margin-bottom: 16px;
        border-radius: 8px;

        ::v-deep .el-card__header {
          padding: 15px 20px;
        }

        ::v-deep .el-card__body {
          padding: 20px 16px 16px;
        }

        .section-header {
          font-size: 15px;

          i {
            font-size: 18px;
          }
        }
      }

      .el-form-item {
        margin-bottom: 20px;

        ::v-deep .el-form-item__label {
          line-height: 36px;
          font-size: 13px;
        }

        ::v-deep .el-input__inner,
        ::v-deep .el-textarea__inner {
          height: 40px;
          line-height: 40px;
          font-size: 13px;
        }

        ::v-deep .el-select .el-input__inner,
        ::v-deep .el-date-editor .el-input__inner {
          height: 40px;
          line-height: 40px;
        }
      }

      .el-row {
        .el-col {
          &:not(:last-child) {
            margin-bottom: 12px;
          }
        }
      }
    }

    .form-footer {
      padding: 24px 16px 20px;

      .el-button {
        padding: 10px 24px;
        height: 42px;
        min-width: 100px;
        font-size: 13px;
        margin: 0 6px;

        i {
          font-size: 14px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .device-form-container {
    .device-form {
      .el-row {
        .el-col {
          width: 100% !important;
          flex: 0 0 100% !important;
          max-width: 100% !important;
        }
      }
    }

    .form-footer {
      .el-button {
        width: 100%;
        margin: 8px 0 0 0;

        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
}
</style>